<template>
  <div v-if="comment" class="comment-info-wrap">
    <div class="comment-title">
			<div>用户评价</div>
			<div>更多</div>
		</div>
		<div v-for="(item,index) in comment" :key="index">
			<div class="comment-user-info">
				<span><img :src="item.user.avatar" alt="" class="avatar"></span>
				<span>{{item.user.uname}}</span>
			</div>
			<div class="comment-text">{{item.content}}</div>
			<div class="comment-goods-info">
				<span class="comment-time">{{l1(item)}}</span>
				<span>{{item.style}}</span>
			</div>
			<div class="comment-info">
				<div class="comment-info-images" v-for="(item) in item.images" :key="item+'z'" @click="o1($event)" ref="p">
					<img :src="item" alt="">
				</div>
			</div>
		</div>
    <div class="maximg" v-show="k2"><img :src="k1" alt=""> <span @click="x1">×</span></div>
  </div>
</template>

<script>
import {formatDate} from '../../../common/untils'
export default {
  data(){
    return{
      k1:'',
      k2:false
    }
  },
  props:{
    comment:{
      type:Array,
      default(){
        return[]
      }
    }
  },
  methods:{//将总毫秒转换成一个时间格式
    l1(){
      let value = this
      const date = new Date(value * 1000);
      return formatDate(date, 'yyyy-MM-dd');
    },
    o1(e){
      // console.log(this.$refs.p[index2]);
      // console.log(this.$refs.p[index2].src);
      this.k2=true
      console.log(e.target.getAttribute('src'));
      this.k1=e.target.getAttribute('src')

    },
    x1(){
      this.k2=false
    }
  }

}
</script>

<style scopend>
.comment-info-wrap {
  margin-top:15px ;
	padding: 0 8px;
	font-size: 14px;
	border-bottom: 4px solid #ececec;
}
.comment-title {
  display: flex;
  justify-content: space-between;
	border-bottom: 1px solid #ececec;
	padding: 10px 4px;
}
  .comment-user-info {
	padding: 10px 0;
			
}
.avatar {
		width: 40px;
		height: 40px;
	  border-radius: 100%;
	  margin-right: 10px;
	  vertical-align: middle;
	}
 .comment-text {
	line-height: 20px;
}
.comment-goods-info {
	color: #999;
	margin: 4px 0;	
}
.comment-time {
	margin-right: 10px;
}
.comment-info{
  display: flex;
}
.comment-info-images img{
	width: 60px;
	height: 60px;
	margin-right: 6px;
}
.maximg{
  position: fixed;
  width: 70vw;
  top: 20vh;
  left: 15vw;
  box-shadow: 0 0 10px 1000px rgba(0, 0, 0, 0.171);
}
.maximg img{
  width: 100%;
}
.maximg span{
  position: absolute;
  width:30px;
  height: 30px;
  top: -22px;
  right: -28px ;
  font-size: 30px;
  line-height: 26px;
  text-align:center;
  border:solid 2px rgb(15, 15, 15)  ;
  border-radius: 50%;
}
</style>